<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>喜马拉雅</title>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>


<body>
   <!-- 头部 -->
   <div class="siteHeader">
    <div class="container">
      <div class="brandLogo">
        <h1><a href="#">喜马拉雅</a></h1>
      </div>
      <div class="mainNav">
        <a href="#" class="navLink">发现</a>
        <span class="dropdownMenu">
          <a href="#" class="navLink dropdownMenu">频道<span class="iconfont icon-xia"></span></a>
          <div class="categoryPanel">
            <a href="#">音乐</a>
            <a href="#">有声书</a>
            <a href="#">娱乐</a>
            <a href="#">外语</a>
            <a href="#">儿童</a>
            <a href="#">商业</a>
            <a href="#">历史</a>
            <a href="#">财经</a>
            <a href="#">相声评书</a>
            <a href="#">个人成长</a>
            <a href="#">广播剧</a>
            <a href="#">有声图书</a>
            <a href="#">人文国学</a>
            <a href="#">热点生活</a>
            <a href="#">悬疑</a>
            <a href="#">健康</a>
          </div>
        </span>
        <a href="#" class="navLink">电台</a>
        <div class="navUnderline"></div>
      </div>
      <div class="searchBar">
        <form action="#">
          <input type="text" placeholder="专辑/声音/主播" />
          <a href="#" class="searchBtn">
            <span class="iconfont icon-sousuo"></span>
          </a>
          <div class="searchSuggest" id="search-suggest">
            <p class="searchHint">热门搜索</p>
            <a href="#">斗罗大陆</a>
            <a href="#">百年孤独</a>
            <a href="#">米小圈上学记</a>
            <a href="#">金刚经</a>
            <a href="#">吞噬星空</a>
          </div>
        </form>
      </div>
      <div class="topIcons">
        <a href="#" class="iconEntry">
          <span class="iconfont icon-shangchuan"></span>
          <span class="entryLabel">上传</span>
          <div class="uploadPanel">
            <div class="uploadIcons">
              <a href="#" class="iconEntry" data-id="1">
                <span class="iconfont icon-jianji"></span>
                <span class="entryLabel">音频剪辑</span>
              </a>
              <a href="#" class="iconEntry" data-id="2">
                <span class="iconfont icon-shangchuan"></span>
                <span class="entryLabel">上传节目</span>
              </a>
              <a href="#" class="iconEntry" data-id="3">
                <span class="iconfont icon-shouyinji"></span>
                <span class="entryLabel">我的节目</span>
              </a>
              <a href="#" class="iconEntry" data-id="4">
                <span class="iconfont icon-zhubo"></span>
                <span class="entryLabel">主播入驻</span>
              </a>
            </div>
            <div class="userInfo">
              <a href="#"><img src="./images/beijing4.png" alt=""></a>
            </div>
          </div>
        </a>
        <a href="#" class="iconEntry">
          <span class="iconfont icon-V"></span>
          <span class="entryLabel">创作中心</span>
        </a>
        <a href="#" class="iconEntry">
          <span class="iconfont icon-shouyinji"></span>
          <span class="entryLabel">有声出版</span>
        </a>
        <a href="#" class="iconEntry">
          <span class="iconfont icon-kehuduan"></span>
          <span class="entryLabel">客户端</span>
          <img class="clientImage" src="./images/kehuduan.png" alt="客户端图片">
        </a>
        <a href="#" class="iconEntry active">
          <img src="./images/touxiang.png" alt="" />
          <div class="userLogin">
            <div class="userInfo">
              <span>未登录</span>
            </div>
            <div class="userIcons">
              <p>快速登陆</p>
              <ul>
                <li>
                  <span class="iconfont icon-kehuduan"></span>
                  <span class="entryLabel">账号</span>
                </li>
                <li>
                  <span class="iconfont icon-erweima"></span>
                  <span class="entryLabel">二维码</span>
                </li>
                <li>
                  <span class="iconfont icon-weixin"></span>
                  <span class="entryLabel">微信</span>
                </li>
                <li>
                  <span class="iconfont icon-xinlangweibo"></span>
                  <span class="entryLabel">微博</span>
                </li>
                <li>
                  <span class="iconfont icon-QQ"></span>
                  <span class="entryLabel">QQ</span>
                </li>
              </ul>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
  
  <!-- main -->
  <div class="main">
    <div class="container">
      <!-- layout -->
      <div class="layout">
        <!-- 主体内容  -->
        <div class="layout-main">
          <div class="panel">
            <div class="panel-head">
              <h3 class="panel-head-tit">猜你喜欢</h3>
              <a class="panel-head-toggle" href="#">
                <span class="iconfont icon-shuaxin"></span>
                <span>换一批</span>
              </a>
            </div>
            <div class="panel-body">
              <div class="panel-body">
                <ul id="guess-list">
                  <!-- 动态生成的内容将插入到这里 -->
                </ul>
              </div>
              </ul>
            </div>
          </div>
        </div>
        <!-- 侧边栏 -->
        <div class="layout-aside">
          <div class="card">
            <div class="card-head">
              <img class="avatar" src="./images/beijing1.png" alt="" />
              <p class="text">快速登录，开启嗨听体验</p>
            </div>
            <div class="card-info">
              <a href="#" class="login">登 录</a>
            </div>
          </div>
          <div class="download">
            <div class="dl">
              <p class="dl-tit">下载客户端</p>
              <a href="#" class="dl-btn">iPhone</a>
              <a href="#" class="dl-btn">Android</a>
            </div>
            <img class="download-img" src="./images/beijing2.png" alt="">
          </div>
        </div>
      </div>
      <!-- 内容类 -->
      <div class="content container">
        <div class="left">
          <div class="title">
            <div class="title-head">
              <h3 class="title-head-tit">有声书</h3>
              <ul id="audiobook-categories">
                <!-- 动态生成分类链接 -->
              </ul>
              <a class="title-head-toggle" href="#">
                <span>更多</span>
              </a>
            </div>
          </div>
          <div class="panel-body">
            <ul id="audiobook-list">
            </ul>
          </div>
        </div>
        <div class="right">
          <div class="list-tit">有声书新品榜</div>
          <div class="list">
            <ul id="ranking-list">
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="./js/index.js"></script>
</body>

</html>